<template>
  <div>
    <crm-header v-bind:configure="Toolbar"></crm-header>
    <!--mui-content 必须放在 mui-footer 同级节点下面,否则会出现滚动区域无法完全显示的问题-->
    <div class="mui-content">
      <div class="mui-scroll-wrapper" style="top: 44px;background: #f1f1f1;">
        <div class="mui-scroll">
          <div class="the_add">
            <ul class="mui-table-view">
              <li class="mui-table-view-cell crm-listSingle">
                <a class='mui-navigate-right' @click="tapLink">
                <span>
                  <span class="mui-icon"><label class="iconmg">所在地区</label></span>
                </span>
                  <div v-text="area"></div>
                </a>
              </li>
              <li class="mui-table-view-cell crm-listSingle">
                <textarea v-model="valueData.detailAddress" rows="3" style="padding: 0px;font-size: 13px;" cols="10"
                          placeholder="请输入详细地址"></textarea>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import header from 'crm-header';
  //  var nativeApi = require('nativeApi');
  require('mui.picker.min');
  require('citydata');
  var {FastClick} = require('fastclick');
  export default{
    components: {
      'crm-header': header
    },
    data: function () {
      var self = this;
      return {
        Toolbar: { // 页面同步的配置
          show: true,
          title: '选择地址', // 头标题
          ele: [
            {
              class: '',
              text: '',
              show: true,
              fn () {
                history.go();
              }
            },
            {
              class: 'submit',
              text: '确定',
              show: true,
              fn () {
                window.addAddress(self.valueData)
              }
            }
          ]
        },
        valueData: {
          'detailAddress': '',
          'address': '',
          'province': '',
          'city': '',
          'district': '',
          'adcode': '',
          'cityCode': '',
          'longitude': '',
          'latitude': ''
        }
      };
    },
    methods: {
      /*年月选择*/
      tapLink: function () {
        var self = this;
        var picker = new mui.PopPicker({
          layer: 3
        });
        var provCode = "110000";
        var cityCode = "110101";
        picker.pickers[0].setSelectedValue(provCode, 0, function() {
          setTimeout(function() {
            picker.pickers[1].setSelectedValue(cityCode);
          }, 100);
        });
        picker.setData(cityData3);
        picker.show(function (rs) {
          if (rs[0].text == rs[1].text) {
            rs[1].text = '';
          }
          self.valueData = {
            'address': rs[0].text + (rs[1].text || '') + (rs[2].text || ''),
            'province': rs[0].text || '',
            'city': rs[1].text || '',
            'cityCode': rs[1].value,
            'adname': rs[2].text,
            'adcode': rs[2].value,
            'longitude': '',
            'latitude': '',
            'detailAddress': ''
          }
          picker.dispose();
        });
      }
    },
    computed: {
      // 获取详情少数字段
      area: function () {
        var self = this;
        return self.valueData.address || '请选择地区';
      }
    },
    route: {
      data: function () {
        console.info('地址页面');
        var self = this;
        var data = window.setAddress();
//        if (data.address !== '') {
          self.valueData = JSON.parse(JSON.stringify(data));
//        }
      }
    },
    ready: function () {

      FastClick.attach(document.body);
      mui('.mui-scroll-wrapper').scroll();
    }
  };
</script>
